<template>
  <div class="about">
    <h1>This is an vuex page</h1>
    <div>
      <h2>age:{{ age }}</h2>
      <h2>info.name</h2>
      <ul>
        <li v-for="item in info.name" :key="item">{{item}}</li>
      </ul>
      <h2>tip:{{ tip }}</h2>
      <el-button type="primary" size="default" 
        @click="$_setData"
        data-model="age"
        data-value="22"
      >event调用 修改age</el-button><br />
      <el-button type="primary" size="default" 
        @click="$_setData(null , { 'info.name[0],age':10 } )"
      >event调用 修改info.name</el-button><br />
      <el-button type="primary" size="default" 
        @click="setData_active"
      >主动调用 修改tip</el-button>
    </div>
  </div>
</template>
<script>
const { $_setData } = require("/src/utils/main");

export default {
  data(){
    return {
      info:{
        name:[1,2,3]
      }
      ,age: 16
      ,tip:{ index:0 }
    }
  },
  methods:{
    $_setData
    ,setData_active(){
      const vm = this;
      // 修改tip
      vm.$_setData(null ,{
        //必须返回一个全新的对象   否则不会响应
        tip(ov){
          return Object.assign({},ov,{ name:"tip" });
        }
      });
    }
  }  
}
</script>